<template>
  <div :class="['apiCard',{active:select===index}]" @click="$emit('handlerClick')">
    <span class="label">授 权 ID：{{ params.appid }}</span>
    <span class="label">认证密钥：******
  <el-button v-if="params.status == 1" type="text" size="mini" @click.stop="handlerCopy">复制</el-button>
  </span>
    <span class="label">状     态：{{ apiStatusMap[params.status] }}</span>
    <span class="label">申请时间：{{ params.applyTime | timeFormateYYYYMMDD }}</span>
    <!--  <span class="label">审批日志：<seeLogBtn></seeLogBtn></span>-->
    <span class="label">审批结果：
    <el-popover
        placement="right"
        width="200"
        trigger="click">
      <div class="remark">
        <span class="title">结果备注</span>
        <span class="content"> {{params.auditRemark}}</span>
      </div>
    <el-button type="text"  slot="reference" size="mini" @click.stop="()=>{}">{{auditStatusMap[params.auditStatus]}}</el-button>
    </el-popover>
  </span>
    <img v-if="select===index" src="../../../../assets/api-select.png" alt="">
  </div>
</template>

<script>
import seeLogBtn from "@/views/apiServe/api/module/seeLogBtn";
import dict from "@/util/dict";
// {{ params.appkey }}
export default {
  name: "apiCard",
  data(){
    return {
      apiStatusMap:dict.apiStatusMap,
      auditStatusMap:dict.auditStatusMap
    }
  },
  components:{
    seeLogBtn
  },
  methods:{
    handlerCopy(){
      let copyText = this.params.appkey
      try {
        navigator.clipboard.writeText(copyText)
        this.$message('已复制到剪切板');
        //在此运行代码
      }
      catch(err){
        //在此处理错误
        const input = document.createElement('input')
        document.body.appendChild(input)
        input.setAttribute('value', copyText)
        input.select()
        if (document.execCommand('copy')) {
          document.execCommand('copy')
        }
        document.body.removeChild(input)
        this.$message('已复制到剪切板');
      }



    },
  },
  props:{
    index:{
      default:0
    },
    select:{
      default:-1
    },
    params:{
      default:()=>{}
    },
  },
}
</script>

<style scoped lang="less">
.remark{
  span{
    display: inline-block;
    width: 100%;
    font-size: 13px;
  }
  .title{
    color: #0F47B8;
    font-weight: 600;
    font-size: 14px;
  }
}
.apiCard{
  width: 148px;
  height: 148px;
  padding: 15px;
  background: white;
  border: 1px solid white;
  cursor: pointer;
  position: relative;
  .label{
    display: inline-block;
    height: 26px;
    width: 100%;
    font-size: 12px;
    margin-bottom: 3px;
  }
  img{
    position: absolute;
    right: 0;
    top:0
  }
}
.active{
  border: 1px solid #0F47B8;
}
</style>